<!DOCTYPE html>

<html>
	<head>
		<script type="text/javascript" src="../static/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../static/main.js"></script>
		<script type="text/javascript" src="../static/jquery.dataTables.js"></script>
		<link rel="stylesheet" type="text/css" href="../static/main.css" />
	</head>
	
	<body>

		<div id="lightboxOverlay">			
		</div>

		
		<div id="lightbox">
			<img src="../static/close_button.png" />
			<div id="lightboxHeader">
			</div>

			<div id="uploadCodeDiv">
				<form action="upload_file/jobname" method="post" enctype="multipart/form-data">
					<label for="filePath">Code File:</label>
					<input id="filePath" type="file" name="file" />
					<input type="submit" value="upload" />
				</form>
			</div>

		    <div id="createJobDiv">
		        <label for="jobName">Job Name:</label>
		        <input id="jobName" type="text">
		        <button>Create</button>
		    </div>

			<div id="registerTaskDiv">
				<label for="taskName">Task Name: </label>
				<input id="taskName" type="text" />
				<label for="cmdLine">Command Line: </label>
				<input id="cmdLine" type="text" />
				<label for="taskType">Task Type:</label>
				<select id="taskType">
					<option value="dataflow">Data Flow</option>
					<option value="event">Event</option>
				</select>
				<div id="eventDetailsDiv">
					<label for="eventType">Event Type:</label>
					<select id="eventType">
						<option value="JobStartedEvent">Job Started</option>
						<option value="JobStoppedEvent">Job Stopped</option>
						<option value="PeriodicTimeEvent">Periodic</option>
						<option value="OneShotTimeEvent">One Shot</option>
					</select>
					<div id="periodEventDiv" class="eventDivs">
						<label for="periodTime">Period (seconds):</label>
						<input id="periodTime" type="number" min="1"/>
					</div>
					<div id="oneshotEventDiv" class="eventDivs">
						<label for="oneshotTime">After (seconds):</label>
						<input id="oneshotTime" type="number" min="1"/>
					</div>
				</div>
				<button class="registerTaskBtn">Register</button>
			</div>
		</div>
		
		<div id="header">
			<span id="welcomeMsg"> WELCOME TO DEXEN </span>
			<a href="{{ url_for('logout') }}">Logout</a>
			<span id="userName">{{ username }} logged in.</span>	
		</div>
		
		<div class="mainContent">
			<div id="jobsDiv">
				<div id="jobsDivHeader">
					<span>DEXEN JOBS:</span>
					<button id="refreshJobBtn">Refresh</button>
					<button id="createJobBtn">Create Job</button>
				</div>
				<ul id="jobs">
				</ul>			
			</div>
			
			<div id="executionsDiv">
				<div id="executionsHeader">
					<span>EXECUTIONS:</span>
					<button class="refreshBtn">Refresh</button>
				</div>
				<table id="executionsTable" border="1">
					<thead>
						<tr>
							<th>ID</th>
							<th>Task Name</th>
							<th>Worker Name</th>					
							<th>Creation Time</th>					
							<th>Begin Time</th>					
							<th>End Time</th>					
							<th>Status</th>					
							<th>Stdout</th>					
							<th>Stderr</th>					
						</tr>
					</thead>
					<tbody>
					</tbody>
					<!-- 
					<tr>
						<td data-field="execution_id"></td>
						<td data-field="task_name"></td>
						<td data-field="worker_name"></td>
						<td data-field="creation_time"></td>
						<td data-field="begin_time"></td>
						<td data-field="end_time"></td>
						<td data-field="status"></td>
						<td data-field="stdout"></td>
						<td data-field="stderr"></td>
					</tr> -->
				</table>
			</div>
		</div>
		
	</body>
	
</html>